<template>
  <el-dialog title="排查指派" :close-on-click-modal="false" :visible.sync="visible" width="800px" append-to-body :before-close="handleClose">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="mini">
      <div class="form-title">基本信息</div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="路线名称" prop="roadName">
            <el-input v-model="form.roadName" placeholder="请输入路线名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="位置桩号" prop="locationNum">
            <el-input v-model="form.locationNum" placeholder="请输入位置桩号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="类型" prop="iTroubleshooting">
            <common-check-type-select v-model="form.iTroubleshooting" :parentId="0" placeholder="请输入选择类型"></common-check-type-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部位" prop="iPart">
            <common-check-type-select v-model="form.iPart" :parentId="form.iTroubleshooting" placeholder="请输入选择部位"></common-check-type-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="form-title">指派信息</div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="指派人" prop="assignorUserName">
            {{name}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="选择作业项目" prop="quantitativeTypeId">
            <maintain-work-project-select v-model="form.quantitativeTypeId"></maintain-work-project-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="排查部门" prop="deptId">
            <dept-tree-select v-model="form.deptId" placeholder="请选择排查部门" @change="handleDeptChange"></dept-tree-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="自有人员" prop="ownPersonnel">
            <dept-user-select :multiple="true" v-model="form.ownPersonnel" :deptId="form.deptId"></dept-user-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="外包人数" prop="outSourceNum">
            <el-input type="number" v-model="form.outSourceNum" placeholder="请输入外包人数" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务数" prop="taskNum">
            <el-input type="number" v-model="form.taskNum" placeholder="请输入任务数" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!-- <el-col :span="12">
            <el-form-item label="排查时间" prop="troubleshootingTime">
              <el-date-picker clearable v-model="form.troubleshootingTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择排查时间"></el-date-picker>
            </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="接收人" prop="receiveUserId">
            <dept-user-select v-model="form.receiveUserId" :deptId="form.deptId"></dept-user-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  addTroubleShooting,
} from "@/api/cases/troubleShooting";
import MaintainWorkProjectSelect from '@/components/Select/MaintainWorkProjectSelect.vue';
import CommonCheckTypeSelect from '@/components/Select/CommonCheckTypeSelect.vue';
import DeptUserSelect from '@/components/Select/DeptUserSelect.vue';
import { mapGetters } from 'vuex';
import DeptTreeSelect from '../../../../components/Select/DeptTreeSelect.vue';

export default {
  components: { CommonCheckTypeSelect, MaintainWorkProjectSelect, DeptUserSelect,DeptTreeSelect },
  data() {
    return {
      visible: false,
      form: {
        id: void 0,
        roadName: void 0,
        iTroubleshooting: void 0,
        iPart: void 0,
        locationNum: void 0,
        dataStatus: 5,//待接收
        assignorUserId: void 0,
        quantitativeTypeId: void 0,
        ownPersonnel: [],
        outSourceNum: void 0,
        taskNum: void 0,
        deptId: void 0,
        // troubleshootingTime: void 0,
        receiveUserId: void 0,
        messageType: 2,//类型
      }
    }
  },
  computed: {
    ...mapGetters(["userId", "name"]),
    // 表单校验
    rules() {
      return {
        deptId: [
          { required: true, message: "部门不能为空", trigger: "change" },
        ],
        roadName: [
          { required: true, message: "路线名称不能为空", trigger: "blur" },
        ],
        iTroubleshooting: [
          { required: true, message: "类型不能为空", trigger: "change" },
        ],
        iPart: [
          { required: true, message: "部位不能为空", trigger: "change" },
        ],
        locationNum: [
          { required: true, message: "位置桩号不能为空", trigger: "blur" },
        ],
        quantitativeTypeId: [
          { required: true, message: "作业项目不能为空", trigger: "change" },
        ],
        taskNum: [
          { required: true, message: "任务数不能为空", trigger: "blur" },
        ],
        // troubleshootingTime: [
        //   { required: true, message: "排查时间不能为空", trigger: "change" },
        // ],
        receiveUserId: [
          { required: true, message: "接收人不能为空", trigger: "change" },
        ],
      }
    },
  },
  methods: {
    /**
     * 打开
     */
    open() {
      this.visible = true;
      this.reset();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let data = Object.assign({}, this.form, { dataStatus: 5 });
          if((data.ownPersonnel && data.ownPersonnel.length > 0 ) || data.outSourceNum > 0){
            addTroubleShooting(data).then(({ code, data, msg }) => {
              if (code == 200) {
                this.$modal.msgSuccess("指派完成");
                this.handleClose();
                this.$emit("ok")
              } else {
                this.$modal.msgError(msg);
              }
            });
          }else{
            this.$modal.msg("请选择自有人员或填写外包人数");
          }
        }
      });
    },
    reset() {
      this.form = {
        id: void 0,
        roadName: void 0,
        iTroubleshooting: void 0,
        iPart: void 0,
        locationNum: void 0,
        dataStatus: 5,//待接收
        assignorUserId: this.userId,
        quantitativeTypeId: void 0,
        ownPersonnel: [],
        outSourceNum: void 0,
        taskNum: void 0,
        deptId: void 0,
        // troubleshootingTime: void 0,
        receiveUserId: void 0,
        messageType: 2,//类型2
      }
    },
    handleDeptChange(){
      this.form.receiveUserId = void 0;
      this.form.ownPersonnel = void 0;
    },
    handleClose() {
      this.cancel()
    },
    cancel() {
      this.visible = false;
    }
  }
}
</script>